<template>
  <div class="button_group">
    <img
      v-if="product.count>0"
      src="../assets/images/-.png"
      style="width:25px;height:25px;"
      @click.stop="subCarts(product)"
    />
    <div v-if="product.count>0" class="_input" v-text="product.count" />
    <img
      src="../assets/images/+.png"
      style="width:25px;height:25px;"
      @click.stop="addCarts(product)"
    />
  </div>
</template>

<script>
import { Dialog } from "vant";
export default {
  props: {
    product: Object
  },
  methods: {
    addCarts: function(product) {
      product.count++;
      this.$bus.$emit("addCarts", product);
    },
    subCarts: function(product) {
      if (product.count == 1) {
        Dialog.confirm({
          title: "提示",
          message: "是否删除当前菜品？"
        })
          .then(() => {
            product.count--;
            this.$bus.$emit("reduceCarts", product);
          })
          .catch(() => {
          });
      }
    }
  }
};
</script>

<style scoped>
.button_group {
  text-align: right;
}
._input {
  display: inline-block;
  width: 3rem;
  border-bottom: 1px solid black;
  vertical-align: 5px;
  text-align: center;
  font-size: 1.4rem;
}
</style>